<%--
  Created by IntelliJ IDEA.
  User: MyUser
  Date: 2025/4/11
  Time: 16:20
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!-- 页面元信息 -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Bootstrap 5 CSS from jsDelivr CDN -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Bootstrap图标库 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">

    <!-- 富文本编辑器CSS -->
    <link href="https://cdn.jsdelivr.net/npm/quill@2.0.0/dist/quill.snow.css" rel="stylesheet">

    <title>编辑帖子 - 社区论坛</title>

    <style>
        .avatar-sm {
            width: 30px;
            height: 30px;
            border-radius: 50%;
        }
        a {
            text-decoration: none; /* 去除下划线 */
            color: black; /* 设置链接颜色为蓝色 */
            transition: color 0.3s; /* 添加颜色过渡效果 */
        }
        /* 自定义样式 */
        body {
            background-color: #f8f9fa;
        }
        .edit-container {
            max-width: 800px;
            margin: 2rem auto;
            background: white;
            border-radius: 10px;
            box-shadow: 0 0 15px rgba(0,0,0,0.05);
            overflow: hidden;
            padding: 2rem;
        }
        .edit-header {
            margin-bottom: 2rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid #eee;
        }
        .tag-input-container {
            position: relative;
        }
        .tag-list {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-top: 0.5rem;
        }
        .tag-item {
            display: inline-flex;
            align-items: center;
            background-color: #e9ecef;
            padding: 0.25rem 0.75rem;
            border-radius: 20px;
            font-size: 0.875rem;
        }
        .tag-remove {
            margin-left: 0.5rem;
            cursor: pointer;
            color: #6c757d;
        }
        .tag-remove:hover {
            color: #dc3545;
        }
        .tag-suggestions {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background: white;
            border: 1px solid #dee2e6;
            border-radius: 0 0 5px 5px;
            max-height: 200px;
            overflow-y: auto;
            z-index: 1000;
            display: none;
        }
        .tag-suggestion {
            padding: 0.5rem 1rem;
            cursor: pointer;
        }
        .tag-suggestion:hover {
            background-color: #f8f9fa;
        }
        .editor-container {
            height: 400px;
            margin-bottom: 1.5rem;
        }
        .form-actions {
            display: flex;
            justify-content: flex-end;
            gap: 1rem;
            margin-top: 2rem;
        }
        .image-upload-preview {
            max-width: 200px;
            max-height: 200px;
            margin-top: 1rem;
            display: none;
        }
        .upload-area {
            border: 2px dashed #dee2e6;
            border-radius: 5px;
            padding: 1.5rem;
            text-align: center;
            margin-bottom: 1rem;
            cursor: pointer;
        }
        .upload-area:hover {
            border-color: #adb5bd;
        }
    </style>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <div class="container">
        <a class="navbar-brand" href="#">广软课程论坛</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto">
                <li class="nav-item">
                    <a class="nav-link active" href="index.jsp">首页</a>
                </li>
            </ul>
            <form class="d-flex me-2" action="/post/search" method="get">
                <input class="form-control me-2" type="search" name="keyword" placeholder="搜索帖子..." aria-label="Search">
                <button class="btn btn-outline-light" type="submit">搜索</button>
            </form>
            <div class="dropdown">
                <a href="#" class="d-flex align-items-center text-white text-decoration-none dropdown-toggle" id="dropdownUser" data-bs-toggle="dropdown">
                    <img src="https://img0.baidu.com/it/u=3985150573,583103601&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500" alt="头像" class="avatar-sm me-2">
                    <span></span>
                </a>
                <ul class="dropdown-menu dropdown-menu-end">
                    <li><a class="dropdown-item" href="PersonInfo.jsp">个人中心</a></li>
                    <li><a class="dropdown-item" href="AddNewPost.jsp">发布新帖</a></li>

                    <li><hr class="dropdown-divider"></li>
                    <li><a class="dropdown-item" href="/admin/dashboard">管理后台</a></li>

                    <li><hr class="dropdown-divider"></li>
                    <li><a class="dropdown-item" href="/logout">退出登录</a></li>
                </ul>
            </div>


            <a href="Login.jsp" class="btn btn-outline-light me-2">登录</a>
            <a href="Register.jsp" class="btn btn-light">注册</a>

        </div>
    </div>
</nav>

<!-- 编辑帖子内容 -->
<div class="container">
    <div class="edit-container">
        <div class="edit-header">
            <h2>添加帖子</h2>
            <p class="text-muted">修改您的帖子内容，完成后点击保存按钮</p>
        </div>

        <form id="editPostForm" action="#" method="post">
            <!-- 标题 -->
            <div class="mb-4">
                <label for="postTitle" class="form-label">标题</label>
                <input type="text" class="form-control" id="postTitle" value="如何使用Bootstrap 5快速搭建响应式网站" required>
            </div>

            <!-- 标签 -->
            <div class="mb-4 tag-input-container">
                <label for="tagInput" class="form-label">标签</label>
                <input type="text" class="form-control" id="tagInput" placeholder="输入标签，按Enter添加">
                <div class="tag-list" id="tagList">
                    <div class="tag-item">
                        技术讨论
                        <span class="tag-remove" onclick="removeTag(this)">&times;</span>
                    </div>
                    <div class="tag-item">
                        Bootstrap
                        <span class="tag-remove" onclick="removeTag(this)">&times;</span>
                    </div>
                </div>
                <div class="tag-suggestions" id="tagSuggestions">
                    <div class="tag-suggestion" onclick="selectTag('前端开发')">前端开发</div>
                    <div class="tag-suggestion" onclick="selectTag('CSS框架')">CSS框架</div>
                    <div class="tag-suggestion" onclick="selectTag('响应式设计')">响应式设计</div>
                    <div class="tag-suggestion" onclick="selectTag('网页设计')">网页设计</div>
                </div>
            </div>

            <!-- 内容编辑器 -->
            <div class="mb-4">
                <label class="form-label">内容</label>
                <div id="editor" class="editor-container"></div>
                <input type="hidden" id="postContent" name="content">
            </div>


            <!-- 表单操作按钮 -->
            <div class="form-actions">
                <button type="button" class="btn btn-outline-secondary" onclick="window.history.back()">取消</button>
                <button type="submit" id="addPost" class="btn btn-primary">发布</button>
            </div>
        </form>
    </div>
</div>

<!-- 删除确认模态框 -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteModalLabel">确认提交</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                您确认添加新的帖子吗
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-danger" id="confirmPush">确认</button>
            </div>
        </div>
    </div>
</div>

<!-- Bootstrap 5 JS Bundle with Popper from jsDelivr CDN -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<!-- 富文本编辑器JS -->
<script src="https://cdn.jsdelivr.net/npm/quill@2.0.0/dist/quill.js"></script>

<!-- 页面交互脚本 -->
<script>
    // 初始化富文本编辑器
    const quill = new Quill('#editor', {
        theme: 'snow',
        modules: {
            toolbar: [
                [{ 'header': [1, 2, 3, false] }],
                ['bold', 'italic', 'underline', 'strike'],
                [{ 'color': [] }, { 'background': [] }],
                [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                ['link', 'image', 'video'],
                ['clean']
            ]
        },
        placeholder: '请输入帖子内容...'
    });

    // 设置编辑器初始内容
    quill.setContents([
        { insert: 'Bootstrap 5是最流行的前端框架之一，它提供了一套完整的工具集，可以帮助开发者快速构建响应式网站。本文将介绍如何使用Bootstrap 5的基本组件和布局系统。\n', attributes: { align: null } },
        { insert: '\n', attributes: { header: 2 } },
        { insert: '1. 安装Bootstrap 5\n', attributes: { header: 3 } },
        { insert: '可以通过CDN快速引入Bootstrap 5：\n' },
        { insert: '<!-- CSS -->\n<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">\n\n<!-- JavaScript -->\n<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"><\/script>\n', attributes: { 'code-block': true } },
        { insert: '\n2. 使用网格系统\n', attributes: { header: 3 } },
        { insert: 'Bootstrap的网格系统基于12列布局，可以轻松创建响应式设计：\n' },
        { insert: '<div class="container">\n  <div class="row">\n    <div class="col-md-8">主内容</div>\n    <div class="col-md-4">侧边栏</div>\n  </div>\n</div>\n', attributes: { 'code-block': true } },
        { insert: '\n3. 常用组件\n', attributes: { header: 3 } },
        { insert: 'Bootstrap提供了丰富的组件，如导航栏、卡片、模态框等，可以直接使用。\n' }
    ]);


    // 表单提交
    // document.getElementById('editPostForm').addEventListener('submit', function(e) {
    //     e.preventDefault();
    //
    //     获取编辑器内容
    //     const content = quill.root.innerHTML;
    //     document.getElementById('postContent').value = content;
    //
    //     // 获取所有标签
    //     const tags = Array.from(document.querySelectorAll('.tag-item')).map(el =>
    //         el.textContent.replace('×', '').trim()
    //     );
    //
    //     // 这里应该有AJAX提交表单数据
    //     console.log('标题:', document.getElementById('postTitle').value);
    //     console.log('标签:', tags);
    //     console.log('内容:', content);
    //
    //     // 模拟成功响应
    //     alert('帖子修改成功！');
    //     // window.location.href = 'post.jsp?id=123';
    // });

    // 删除帖子
    const deleteModal = new bootstrap.Modal(document.getElementById('deleteModal'));

    document.getElementById('addPost').addEventListener('submit', function() {
        deleteModal.show();
    });

    document.getElementById('confirmPush').addEventListener('click', function() {
        // 这里应该有AJAX请求删除帖子
        deleteModal.hide();
    });
</script>
</body>
</html>

